<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
	
</div>
<script>
	const store = new Vuex.Store({
		state : {
			count : 0,
		},
		mutations : {
			increment : state=>state.count++,
			decrement : state=>state.count--,
		}
	})
	const Counter = {
		template : `<div>
			<div>{{count}}</div>
			<button @click='increment'>+</button>
			<button @click='decrement'>-</button>
		</div>`,
		computed : {
			count(){
				return store.state.count;
			}
		},
		methods : {
			increment(){
				store.commit('increment');
			},
			decrement(){
				store.commit('decrement');
			}
		}
	};
	const vm = new Vue({
		el : '#app',
		store,
		components : {Counter},
		template : `<div><counter></counter></div>`,

	})
</script>	
</body>
</html>